<template>
  <p
    >--------------------------------------------------新 对 联
    --------------------------------------------------</p
  >
  <div>
    <textarea v-model="coupletText"></textarea>
    <button @click="getOneCoupletText">转换</button>
    <input type="file" @change="handleFileChange" accept="video/*" multiple />
    <button @click="endCoupletVideo">生成视频</button>
    <button @click="handleOneVideo">导出视频</button>
    <p style="text-align:center"
      >--------------------------------------------------全 部 随 机
      --------------------------------------------------</p
    >
    <input
      type="file"
      @change="(event) => handleFileChange(event, 'all')"
      accept="video/*"
      multiple
    />

    <!-- 导入的视频 -->
    <div style="display: flex; justify-content: space-between">
      <div
        v-for="(item, i) in coupletArray"
        :key="i"
        style="flex: 1; margin-right: 10px"
      >
        <p>{{ item.text[0] }}</p>
        <video
          :src="item.url"
          type="video/mp4"
          controls
          style="width: 100%; margin-top: 10px"
        />
      </div>
    </div>
    <!-- 生成的视频 -->
    <div style="display: flex; justify-content: space-between">
      <div
        v-for="(item, i) in showVideoCouplet"
        :key="i"
        style="flex: 1; margin-right: 10px"
      >
        <p>{{ item.text[0] }}</p>
        <video
          :src="item.newUrl"
          type="video/mp4"
          controls
          style="width: 100%; margin-top: 10px"
        />
      </div>
    </div>
    <a-modal v-model:visible="visible" @ok="handleOk">
      <template #title> 请输入对联 </template>
      <div>
        <textarea v-model="allCouplet" placeholder="请输入对联"></textarea>
      </div>
    </a-modal>
    <!-- <canvas
      id="canvas"
      width="1080"
      height="1920"
      style="border: 1px solid black"
      ref="canvasTest"
    ></canvas> -->
  </div>
</template>

<script lang="ts" setup>
import {
  MP4Clip,
  Combinator,
  ImgClip,
  OffscreenSprite,
  renderTxt2ImgBitmap,
} from '@webav/av-cliper';
import { ref } from 'vue';
import allCoupletArray from './couplet.ts';
const canvasTest = ref(null);
const visible = ref(false);
const coupletArray = ref([]);
const coupletText = ref('');
const allCouplet = ref(''); // 所有对联集合
const newAllCouplet = ref([]); // 新的对联集合
const showVideoCouplet = ref([]); // 最后展示的视频
const methodsArray = ref([
  { callBack: (info) => oneTemplate(info), name: '第一个模板', type: 'one' },
  { callBack: (info) => twoTemplate(info), name: '第二个模板', type: 'two' },
  { callBack: (info) => threeTemplate(info), name: '第三个模板', type: 'two' },
  { callBack: (info) => fourTemplate(info), name: '第四个模板', type: 'two' },
  { callBack: (info) => fiveTemplate(info), name: '第五个模板', type: 'two' },
  { callBack: (info) => sixTemplate(info), name: '第六个模板', type: 'one' },
  { callBack: (info) => sevenTemplate(info), name: '第七个模板', type: 'one' },
  { callBack: (info) => eightTemplate(info), name: '第八个模板', type: 'one' },
  { callBack: (info) => nineTemplate(info), name: '第九个模板', type: 'one' },
  { callBack: (info) => tenTemplate(info), name: '第十个模板', type: 'one' },
  {
    callBack: (info) => elevenTemplate(info),
    name: '第十一个模板',
    type: 'one',
  },
  {
    callBack: (info) => twelveTemplat(info),
    name: '第十二个模板',
    type: 'one',
  },
  {
    callBack: (info) => thirteenTemplate(info),
    name: '第十三个模板',
    type: 'one',
  },
  {
    callBack: (info) => fourteenTemplate(info),
    name: '第十四个模板',
    type: 'one',
  },
]);
const oneMethodsArray = ref([
  // 单个对联的模板
]);
const twoMethodsArray = ref([
  // 多行对联模板
]);
const mergeCouplet = () => {
  newAllCouplet.value = allCoupletArray.flatMap((item) => item.couplet);
  console.log(newAllCouplet.value);
};
mergeCouplet();
const handleOk = () => {
  getOneCouplet(); // 获取单个对联
  visible.value = false;
};
// 导出视频
const handleOneVideo = () => {
  if (!showVideoCouplet.value.length) {
    alert('请先生成视频');
    return;
  }
  for (const key in showVideoCouplet.value) {
    let link = document.createElement('a');
    link.href = showVideoCouplet.value[key].newUrl;
    link.download = `${key * 1 + 1}-${Date.now()}.mp4`;
    link.click();
  }
};
const setMethods = () => {
  methodsArray.value.forEach((item) => {
    if (item.type === 'one') {
      oneMethodsArray.value.push(item);
    } else if (item.type === 'two') {
      twoMethodsArray.value.push(item);
    }
  });
};
setMethods();
const endCoupletVideo = async (info) => {
  if (info) {
    const videoInfo = info;
    const resp1 = await fetch(videoInfo.url);
    const clip = await new MP4Clip(resp1.body!);
    const spr1 = new OffscreenSprite(clip);
    spr1.flip = 'horizontal'; // 镜像处理视频
    let spr2 = null;
    spr2 = new OffscreenSprite(
      new ImgClip((await fetch(videoInfo.imgUrl)).body)
    );
    const com = new Combinator({
      width: videoInfo.width,
      height: videoInfo.height,
    });
    await com.addSprite(spr1, { main: true });
    await com.addSprite(spr2);
    const srcBlob = await new Response(com?.output() ?? null).blob();
    const link = document.createElement('a');
    link.href = URL.createObjectURL(srcBlob);
    link.download = `${Date.now()}-${videoInfo.text[0]}.mp4`;
    link.click();
  } else {
    if (coupletArray.value.length === 0) {
      alert('请上传视频');
      return;
    }
    showVideoCouplet.value = [];
    coupletArray.value.forEach(async (videoInfo, index) => {
      if (videoInfo.imgUrl !== '') {
        const resp1 = await fetch(videoInfo.url);
        const clip = await new MP4Clip(resp1.body!);
        const spr1 = new OffscreenSprite(clip);
        let spr2 = null;
        spr2 = new OffscreenSprite(
          new ImgClip((await fetch(videoInfo.imgUrl)).body)
        );
        const com = new Combinator({
          width: videoInfo.width,
          height: videoInfo.height,
        });
        await com.addSprite(spr1, { main: true });
        await com.addSprite(spr2);
        const srcBlob = await new Response(com?.output() ?? null).blob();
        videoInfo.newUrl = URL.createObjectURL(srcBlob);

        const link = document.createElement('a');
        link.href = videoInfo.newUrl;
        link.download = `${videoInfo.text[0]}.mp4`;
        link.click();
        showVideoCouplet.value.push(videoInfo);
      }
    });
  }
};
const getOneCoupletText = () => {
  const arr = coupletText.value.split('\t');
  arr.forEach((item, i) => {
    const duilian = item.split(',');
    console.log(duilian);
  });
  console.log(arr);
};
// 获取单个对联
const getOneCouplet = (info) => {
  if (info) {
    console.log(info);
    
    const coupletItem =
      newAllCouplet.value[
        Math.floor(Math.random() * newAllCouplet.value.length)
      ];
    const duilian = coupletItem.split(',');
    info.text = duilian;
    if (duilian.length === 1) {
      oneMethodsArray.value[
        Math.floor(Math.random() * oneMethodsArray.value.length)
      ].callBack(info);
    } else if (duilian.length > 1 && duilian.length <= 3) {
      twoMethodsArray.value[
        Math.floor(Math.random() * twoMethodsArray.value.length)
      ].callBack(info);
    } else if (duilian.length > 3) {
      fifteenTemplate(info);
    }
    endCoupletVideo(info);
  } else {
    const arr = allCouplet.value.split('\t');
    arr.forEach((item, i) => {
      const duilian = item.split(',');
      coupletArray.value[i].text = duilian;
      if (duilian.length === 1) {
        oneMethodsArray.value[
          Math.floor(Math.random() * oneMethodsArray.value.length)
        ].callBack(coupletArray.value[i]);
      } else if (duilian.length > 1 && duilian.length <= 3) {
        twoMethodsArray.value[
          Math.floor(Math.random() * twoMethodsArray.value.length)
        ].callBack(coupletArray.value[i]);
      } else if (duilian.length > 3) {
        fifteenTemplate(coupletArray.value[i]);
      }
      endCoupletVideo(coupletArray.value[i]);
    });
  }
};
// 上传视频文件
const handleFileChange = (event: any, type) => {
  coupletArray.value = [];
  showVideoCouplet.value = [];
  const files = Array.from(event.target.files);
  if (type && type === 'all') {
    files.forEach(async (file: any) => {
      let pushData = {
        width: 0,
        height: 0,
        url: '',
        newUrl: '',
        text: [],
        imgUrl: '',
      };
      if (file && file.type.startsWith('video/')) {
        // 确保文件是视频类型
        const resp1 = await fetch(URL.createObjectURL(file));
        new MP4Clip(resp1.body!).ready.then(async (info) => {
          pushData.url = URL.createObjectURL(file); // 创建可访问的URL
          pushData.width = info.width;
          pushData.height = info.height;
          getOneCouplet(pushData);
          coupletArray.value.push(pushData);
        });
      }
    });
  } else {
    files.forEach(async (file: any) => {
      let pushData = {
        width: 0,
        height: 0,
        url: '',
        newUrl: '',
        text: [],
        imgUrl: '',
      };
      if (file && file.type.startsWith('video/')) {
        // 确保文件是视频类型
        const resp1 = await fetch(URL.createObjectURL(file));
        new MP4Clip(resp1.body!).ready.then(async (info) => {
          pushData.url = URL.createObjectURL(file); // 创建可访问的URL
          pushData.width = info.width;
          pushData.height = info.height;
          coupletArray.value.push(pushData);
        });
      }
    });
    allCouplet.value = '';
    visible.value = true;
  }
};
// setTimeout(() => {
// oneTemplate();
// twoTemplate();
// threeTemplate();
// fourTemplate();
// fiveTemplate();
// sixTemplate();
// sevenTemplate();
// eightTemplate();
// nineTemplate();
// tenTemplate();
// elevenTemplate();
// twelveTemplat();
// thirteenTemplate();
// fourteenTemplate();
// fifteenTemplate();
// }, 500);
// 第十五个模板
const fifteenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  ctx.strokeText('展示你的文采', canvas.width / 2, canvas.height / 2 - 500);
  ctx.fillText('展示你的文采', canvas.width / 2, canvas.height / 2 - 500);
  info.text.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
    } else if (index === 1) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 100);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 100);
    } else if (index === 2) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 + 100);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 + 100);
    } else {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 + 300);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 + 300);
    }
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第十四个模板
const fourteenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  drawRoundedRect(ctx, 150, 370, 800, 180, 20, 'red');
  drawRoundedRect(ctx, 70, 620, 950, 180, 20, 'red');
  drawRoundedRect(ctx, 300, 870, 400, 180, 20, 'red');
  drawRoundedRect(ctx, 80, 1110, 950, 180, 20, 'red');
  drawRoundedRect(ctx, 250, 1370, 550, 180, 20, 'red');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '没有大学文凭', height: -500 },
    // { text: '你是对不出此联的', height: -210 },
    { text: '上联：', height: 0 },
    { text: `${info.text[0]}`, height: 250 },
    { text: '恭请赐教', height: 500 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  ctx.font = 'bold 100px KaiTi'; // 设置字体大小和类型

  ctx.strokeText('你是对不出此联的', canvas.width / 2, canvas.height / 2 - 250);
  ctx.fillText('你是对不出此联的', canvas.width / 2, canvas.height / 2 - 250);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第十三个模板
const thirteenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'red'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '胸中若无二两墨', height: -540 },
    { text: '恐怕很难对出下联', height: -400 },
    { text: '上联：', height: -70 },
    { text: `${info.text[0]}`, height: 70 },
    { text: '下联：高手来接', height: 400 },
    { text: '高手快来挑战吧', height: 560 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第十二个模板
const twelveTemplat = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'red'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '没有大学文凭', height: -540 },
    { text: '很难对出下联', height: -400 },
    { text: '上联：', height: -70 },
    { text: `${info.text[0]}`, height: 70 },
    { text: '下联：', height: 400 },
    { text: '才子佳人请赐教', height: 560 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第十一个模板
const elevenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '问了好多人', height: -700 },
    { text: '没有人对出下联', height: -580 },
    { text: '上联：', height: -300 },
    { text: `${info.text[0]}`, height: -140 },
    { text: '求下联', height: 60 },
    { text: '............', height: 150 },
    { text: '知道你有才', height: 580 },
    { text: '请赐下联 ......', height: 700 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第十个模板
const tenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  let textArray = [
    { text: `${info.text[0]}`, height: -300 },
    { text: '下句怎么讲', height: -100 },
    { text: '？？？？？？', height: 100 },
    { text: '快来挑战吧！', height: 300 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第九个模板
const nineTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '文笔挑战', height: -700 },
    { text: '上句：', height: -400 },
    { text: `${info.text[0]}`, height: -240 },
    { text: '下句：', height: 0 },
    { text: '一一一一一一一', height: 240 },
    { text: '请君赐墨', height: 450 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第八个模板
const eightTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 90px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  const textArray = [
    { text: '整整三天', height: -700 },
    { text: '没有人对出下联', height: -580 },
    { text: '上联：', height: -300 },
    { text: `${info.text[0]}`, height: -140 },
    { text: '求下联', height: 60 },
    { text: '............', height: 150 },
    { text: '知道你有才', height: 580 },
    { text: '请赐下联 ......', height: 700 },
  ];
  textArray.forEach((item, index) => {
    ctx.strokeText(
      item.text,
      canvas.width / 2,
      canvas.height / 2 + item.height
    );
    ctx.fillText(item.text, canvas.width / 2, canvas.height / 2 + item.height);
  });
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第七个模板
const sevenTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  drawRoundedRect(ctx, 150, 170, 780, 300, 20, '#FFDE00'); // 绘制矩形背景
  ctx.font = 'bold 90px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = 'black'; // 设置填充颜色，即文字颜色
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('你好厉害呀', canvas.width / 2, canvas.height / 2 - 700);
  ctx.fillText('你好厉害呀', canvas.width / 2, canvas.height / 2 - 700);
  ctx.strokeText('都说你是网络神评', canvas.width / 2, canvas.height / 2 - 580);
  ctx.fillText('都说你是网络神评', canvas.width / 2, canvas.height / 2 - 580);

  // 对联
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.strokeText('上联：', canvas.width / 2, canvas.height / 2 + 20);
  ctx.fillText('上联：', canvas.width / 2, canvas.height / 2 + 20);
  ctx.strokeText(`${info.text[0]}`, canvas.width / 2, canvas.height / 2 + 160);
  ctx.fillText(`${info.text[0]}`, canvas.width / 2, canvas.height / 2 + 160);
  // footer
  ctx.strokeText('哪位大网红', canvas.width / 2, canvas.height / 2 + 380);
  ctx.fillText('哪位大网红', canvas.width / 2, canvas.height / 2 + 380);
  ctx.strokeText('有好的下联呀？', canvas.width / 2, canvas.height / 2 + 520);
  ctx.fillText('有好的下联呀？', canvas.width / 2, canvas.height / 2 + 520);
  ctx.strokeText('？？？？？？？', canvas.width / 2, canvas.height / 2 + 660);
  ctx.fillText('？？？？？？？', canvas.width / 2, canvas.height / 2 + 660);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 绘制矩形背景
const drawRoundedRect = (ctx, x, y, width, height, radius, color) => {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
};
// 第六个模板
const sixTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFBD16'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('大网红，你不', canvas.width / 2, canvas.height / 2 - 460);
  ctx.fillText('大网红，你不', canvas.width / 2, canvas.height / 2 - 460);
  ctx.strokeText('仅是人上之', canvas.width / 2, canvas.height / 2 - 320);
  ctx.fillText('仅是人上之', canvas.width / 2, canvas.height / 2 - 320);
  ctx.strokeText('人，而且文化', canvas.width / 2, canvas.height / 2 - 160);
  ctx.fillText('人，而且文化', canvas.width / 2, canvas.height / 2 - 160);
  ctx.strokeText('深不见底，请问', canvas.width / 2, canvas.height / 2);
  ctx.fillText('深不见底，请问', canvas.width / 2, canvas.height / 2);
  // 对联
  ctx.strokeText(
    `《${info.text[0]}》`,
    canvas.width / 2,
    canvas.height / 2 + 160
  );
  ctx.fillText(
    `《${info.text[0]}》`,
    canvas.width / 2,
    canvas.height / 2 + 160
  );
  // footer
  ctx.strokeText('下一句怎么说？', canvas.width / 2, canvas.height / 2 + 320);
  ctx.fillText('下一句怎么说？', canvas.width / 2, canvas.height / 2 + 320);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第五个模板
const fiveTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFBD16'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'white'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('此联特别难', canvas.width / 2, canvas.height / 2 - 700);
  ctx.fillText('此联特别难', canvas.width / 2, canvas.height / 2 - 700);
  // 对联
  ctx.fillStyle = 'black'; // 设置填充颜色，即文字颜色
  info.text.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
    } else {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 150);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 150);
    }
  });
  // ctx.strokeText('一山一水一世界', canvas.width / 2, canvas.height / 2 - 300);
  // ctx.fillText('一山一水一世界', canvas.width / 2, canvas.height / 2 - 300);

  // footer
  ctx.fillStyle = '#B7DCF6'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.strokeText('大网红朋友', canvas.width / 2, canvas.height / 2 + 100);
  ctx.fillText('大网红朋友', canvas.width / 2, canvas.height / 2 + 100);
  ctx.strokeText('求您完美下联', canvas.width / 2, canvas.height / 2 + 230);
  ctx.fillText('求您完美下联', canvas.width / 2, canvas.height / 2 + 230);
  ctx.strokeText('诚邀下联', canvas.width / 2, canvas.height / 2 + 360);
  ctx.fillText('诚邀下联', canvas.width / 2, canvas.height / 2 + 360);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第四个模板
const fourTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px KaiTi'; // 设置字体大小和类型
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 15; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('大网红朋友', canvas.width / 2, canvas.height / 2 - 700);
  ctx.fillText('大网红朋友', canvas.width / 2, canvas.height / 2 - 700);
  ctx.strokeText('你的下联是', canvas.width / 2, canvas.height / 2 - 570);
  ctx.fillText('你的下联是', canvas.width / 2, canvas.height / 2 - 570);
  ctx.strokeText('全网对的最好的', canvas.width / 2, canvas.height / 2 - 430);
  ctx.fillText('全网对的最好的', canvas.width / 2, canvas.height / 2 - 430);
  // 对联
  ctx.font = 'bold 120px "Microsoft YaHei"'; // 设置字体大小和类型

  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = '#FF1837'; // 设置描边颜色
  // ctx.strokeText('一山一水一世界', canvas.width / 2, canvas.height / 2);
  // ctx.fillText('一山一水一世界', canvas.width / 2, canvas.height / 2);
  info.text.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2);
    } else {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 + 150);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 + 150);
    }
  });
  // footer
  ctx.fillStyle = '#FFBF17'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = '#B54E58'; // 设置描边颜色
  ctx.strokeText('期待您的精彩下联', canvas.width / 2, canvas.height / 2 + 400);
  ctx.fillText('期待您的精彩下联', canvas.width / 2, canvas.height / 2 + 400);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第三个模板
const threeTemplate = (info) => {
  // const canvas = canvasTest.value;
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px Arial'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText(
    '文笔大挑战：',
    canvas.width / 2 - 150,
    canvas.height / 2 - 500
  );
  ctx.fillText('文笔大挑战：', canvas.width / 2 - 150, canvas.height / 2 - 500);
  // 对联
  info.text.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 300);
    } else {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 - 150);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 - 150);
    }
  });
  // footer
  ctx.strokeText(
    '下句您来写：',
    canvas.width / 2 - 150,
    canvas.height / 2 + 300
  );
  ctx.fillText('下句您来写：', canvas.width / 2 - 150, canvas.height / 2 + 300);
  ctx.strokeText(
    '一 一 一 一 一 一',
    canvas.width / 2,
    canvas.height / 2 + 550
  );
  ctx.fillText('一 一 一 一 一 一', canvas.width / 2, canvas.height / 2 + 550);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
// 第二个模板
const twoTemplate = (info) => {
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px Arial'; // 设置字体大小和类型
  ctx.fillStyle = 'white'; // 设置填充颜色，即文字颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('文笔挑战', canvas.width / 2 - 200, canvas.height / 2 - 500);
  ctx.fillText('文笔挑战', canvas.width / 2 - 200, canvas.height / 2 - 500);
  // 对联
  ctx.fillStyle = '#FFDE00'; // 设置填充颜色
  ctx.strokeText('上联：', canvas.width / 2, canvas.height / 2 - 200);
  ctx.fillText('上联：', canvas.width / 2, canvas.height / 2 - 200);
  info.text.forEach((item, index) => {
    if (index === 0) {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2);
    } else {
      ctx.strokeText(`${item}`, canvas.width / 2, canvas.height / 2 + 150);
      ctx.fillText(`${item}`, canvas.width / 2, canvas.height / 2 + 150);
    }
  });
  // footer
  ctx.strokeText('下联：', canvas.width / 2, canvas.height / 2 + 300);
  ctx.fillText('下联：', canvas.width / 2, canvas.height / 2 + 300);
  ctx.strokeText('请君留墨', canvas.width / 2, canvas.height / 2 + 500);
  ctx.fillText('请君留墨', canvas.width / 2, canvas.height / 2 + 500);
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};

// 第一个模板
const oneTemplate = (info) => {
  const canvas = document.createElement('canvas');
  canvas.width = info.width; // 画布宽
  canvas.height = info.height; // 画布高
  // const canvas = canvasTest.value;
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 120px Arial'; // 设置字体大小和类型
  ctx.fillStyle = '#FCDF00'; // 设置填充颜色
  ctx.strokeStyle = 'black'; // 设置描边颜色
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.textBaseline = 'middle'; // 设置文字基线为中间
  ctx.textAlign = 'center'; // 设置文字对齐方式为居中
  // 文字
  ctx.strokeText('请您赐下联', canvas.width / 2, canvas.height / 2 - 300);
  ctx.fillText('请您赐下联', canvas.width / 2, canvas.height / 2 - 300);
  // 对联
  ctx.font = 'bold 100px Arial'; // 设置字体大小和类型
  ctx.lineWidth = 20; // 设置描边宽度
  ctx.strokeText(`上联：${info.text[0]}`, canvas.width / 2, canvas.height / 2);
  ctx.fillText(`上联：${info.text[0]}`, canvas.width / 2, canvas.height / 2);
  // footer
  ctx.strokeText(
    '下联：____【请赐教】',
    canvas.width / 2,
    canvas.height / 2 + 300
  );
  ctx.fillText(
    '下联：____【请赐教】',
    canvas.width / 2,
    canvas.height / 2 + 300
  );
  // 转换为图片URL
  const imageURL = canvas.toDataURL('image/png');
  const imgUrl = URL.createObjectURL(dataURItoBlob(imageURL));
  info.imgUrl = imgUrl;
};
const dataURItoBlob = (dataURl) => {
  var byteString = atob(dataURl.split(',')[1]);
  var mimeString = dataURl.split(',')[0].split(':')[1].split(';')[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
};
</script>

<style lang="scss" scoped></style>
